<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy概述</title>
</head>
<body>
    <h1>Proxy概述</h1>
    <h2>Proxy用于修改某些操作的默认行为</h2>

    <script>
        // 基本用法
        const obj = new Proxy({}, {
            get: function (target, propKey, receiver) {
                console.log(`getting ${propKey}!`);
                return Reflect.get(target, propKey, receiver);
            },
            set: function (target, propKey, value, receiver) {
                console.log(`setting ${propKey}!`);
                return Reflect.set(target, propKey, value, receiver);
            }
        });

        obj.count = 1; // setting count!
        ++obj.count;   // getting count! setting count!

        // 拦截读取属性
        const handler = {
            get: function(target, name) {
                if (name === 'prototype') {
                    return Object.prototype;
                }
                return '拦截: ' + target[name];
            }
        };

        const p = new Proxy({}, handler);
        p.a = 'b';
        console.log(p.a); // 拦截: b
    </script>
</body>
</html> 